import React from 'react';


const withStorage = WrappedComponent => {

    return class extends React.Component {
        componentWillMount() {
            localStorage.setItem('data', "1111111111111")
            let data = localStorage.getItem('data')
            this.setState({ data: data })
        }

        render() {
            return <WrappedComponent data={this.state.data} {...this.props} />
        }
    }

}

class Page1 extends React.Component {
    render() {
        return <h2>{this.props.data}</h2>
    }
}

class Page2 extends React.Component {
    render() {
        return <h2>{this.props.data}</h2>
    }
}

@withStorage
class Page3 extends React.Component {
    render() {
        return <h2>{this.props.data}</h2>
    }
}

const withToken = WrappedComponent => {

    return class extends React.Component {

        render() {

            const newProps = {
                token: 3333
            }

            return <WrappedComponent  {...this.props} {...newProps} />
        }
    }

}

@withToken
class Page4 extends React.Component {
    render() {
        return <h3>{this.props.name}{this.props.token}</h3>
    }
}

class App extends React.Component {

    render() {
        var Wraped1 = withStorage(Page1);
        var Wraped2 = withStorage(Page2);
        return <>
            <Wraped1></Wraped1>
            <Wraped2></Wraped2>
            <Page3></Page3>
            <Page4 className="page4" name="wmg"></Page4>
        </>
    }
}



export default App;
